<template>
  <div class="hello">
    <el-form label-position="right" label-width="200px;">
      <!--      <el-form-item label="购买结果">-->
      <!--        <el-radio-group v-model="buySubject">-->
      <!--          <el-radio-button label="AB"></el-radio-button>-->
      <!--          <el-radio-button label="AC"></el-radio-button>-->
      <!--          <el-radio-button label="AD"></el-radio-button>-->
      <!--          <el-radio-button label="BC"></el-radio-button>-->
      <!--          <el-radio-button label="BD"></el-radio-button>-->
      <!--          <el-radio-button label="CD"></el-radio-button>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始数量">
            <el-input-number v-model="onceBuyNum" @change="handleChange" :min="1" :max="1000"
                             label="起始数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行数量">
            <el-input-number v-model="buyTimes" @change="handleChangeBuyTimes" :min="1" :max="1000"
                             label="购买数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="buyClick">购买</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="系统结果">
            <el-button type="primary" @click="systemClick('A')">A</el-button>
            <el-button type="primary" @click="systemClick('B')">B</el-button>
            <el-button type="primary" @click="systemClick('C')">C</el-button>
            <el-button type="primary" @click="systemClick('D')">D</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="cancelSystem">撤销</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="dateList" :key="isUpdate">
      <el-table-column label="局数" align="center" prop="id"/>
      <el-table-column label="A下注量" align="center" prop="A"/>
      <el-table-column label="B下注量" align="center" prop="B"/>
      <el-table-column label="C下注量" align="center" prop="C"/>
      <el-table-column label="D下注量" align="center" prop="D"/>
      <el-table-column label="系统结果" align="center" prop="systemResult"/>
      <el-table-column label="累计下住" align="center" prop="bettingTotalSize"/>
      <el-table-column label="累计中注" align="center" prop="hitTotalSize"/>
      <el-table-column label="购买详情" align="center" prop="buyDetailStr"/>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      dateList: [],
      onceBuyNum: 1,
      onceBuyNum2: 1,
      buyTimes: 1,
      buySubject: '',
      isUpdate: true,
      ABCD: [['A', 'B'], ['A', 'C'], ['A', 'D'], ['B', 'C'], ['B', 'D'], ['C', 'D']],
      ABCD2: [['C', 'D'], ['B', 'D'], ['B', 'C'], ['A', 'D'], ['A', 'C'], ['A', 'B']],
      multiples: [[1,1]]
    }
  },
  methods: {
    buyClick: function () {
      if (this.dateList.length > 0 && !this.dateList[0].systemResult) {
        return
      }
      let bettingList = []
      let bettingList2 = []
      for (let i = 0; i < this.buyTimes; i++) {
        let randomNum = Math.floor(Math.random() * 6)
        bettingList.push(this.ABCD[randomNum])
        bettingList2.push(this.ABCD2[randomNum])
      }
      if (this.dateList.length === 0){
        this.dateList.push({
          buySubject: this.buySubject,
          id: this.dateList.length + 1,
          A: this.onceBuyNum * this.buyTimes,
          B: this.onceBuyNum * this.buyTimes,
          C: this.onceBuyNum * this.buyTimes,
          D: this.onceBuyNum * this.buyTimes,
          buyDetail: bettingList,
          buyDetailStr: bettingList.map(item => item.join('')).join("|"),
        });
      }else {
        // let lastItem = this.dateList[this.dateList.length - 1]
        // let bettingList2 = bettingList.flat()
        this.dateList.splice(0, 0, {
          buySubject: this.buySubject,
          id: this.dateList.length + 1,
          A: (eval(bettingList.map((item,index)=>item.indexOf('A') > -1?this.multiples[index][0]:0).join("+"))+
              eval(bettingList2.map((item,index)=>item.indexOf('A') > -1?this.multiples[index][1]:0).join("+")))*this.onceBuyNum,
          B: (eval(bettingList.map((item,index)=>item.indexOf('B') > -1?this.multiples[index][0]:0).join("+"))+
              eval(bettingList2.map((item,index)=>item.indexOf('B') > -1?this.multiples[index][1]:0).join("+")))*this.onceBuyNum,
          C: (eval(bettingList.map((item,index)=>item.indexOf('C') > -1?this.multiples[index][0]:0).join("+"))+
              eval(bettingList2.map((item,index)=>item.indexOf('C') > -1?this.multiples[index][1]:0).join("+")))*this.onceBuyNum,
          D: (eval(bettingList.map((item,index)=>item.indexOf('D') > -1?this.multiples[index][0]:0).join("+"))+
              eval(bettingList2.map((item,index)=>item.indexOf('D') > -1?this.multiples[index][1]:0).join("+")))*this.onceBuyNum,
          buyDetail: bettingList,
          buyDetailStr: bettingList.map(item => item.join('')).join("|"),
        });
      }
      let firstElement = this.dateList[0];
      let minSize = Math.min(firstElement.A,firstElement.B,firstElement.C,firstElement.D)
      firstElement.A = firstElement.A - minSize;
      firstElement.B = firstElement.B - minSize;
      firstElement.C = firstElement.C - minSize;
      firstElement.D = firstElement.D - minSize;
      firstElement.bettingTotalSize = eval(this.dateList.map(item => item.A + item.B + item.C + item.D).join("+"))
    },
    systemClick(tem) {
      if (this.dateList.length === 0 || this.dateList[0].systemResult){
        return
      }
      let index = 0
      let lastItem = this.dateList[index];
      lastItem.systemResult = tem;
      let prvHitTotalSize = 0
      if (index > 0) {
        prvHitTotalSize = this.dateList[index - 1].hitTotalSize
      }
      lastItem.hitTotalSize = prvHitTotalSize + lastItem[tem];
      lastItem.buyDetail.forEach((item,index)=>{
        if (item.indexOf(tem) > -1){
          this.multiples[index][0] = 1
          this.multiples[index][1] = this.multiples[index][1] * 2
        }else {
          this.multiples[index][0] = this.multiples[index][0] * 2
          this.multiples[index][1] = 1
        }
      })
      this.isUpdate = !this.isUpdate;
    },
    handleChange(value) {
      console.log(value);
    },
    handleChangeBuyTimes(value) {
      while (this.multiples.length < value){
        this.multiples.push([1,1])
      }
      console.log(value);
    },
    cancelSystem() {
      if (!this.dateList){
        return
      }
      let lastItem = this.dateList[this.dateList.length - 1];
      lastItem.hitTotalSize = null;
      lastItem.systemResult = null;
      this.isUpdate = !this.isUpdate;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
